<template>
  <div class="info" :style="{height: clientHeight+'px'}">
    <van-tree-select
        v-model:main-active-index="activeIndex"
        :items="items"
        height="100%"
    >
      <template #content>
        <div :v-if="activeIndex === index" v-for="(item, index) in list[activeIndex]" :key="item.id">
          <div class="content" @click="showDetail(item)">
            <div><van-image width="32" height="32" :src="item.pic"/></div>
            <div class="text">
              <div class="title">{{item.title}}</div>
              <div class="des">{{item.des}}</div>
            </div>
          </div>
        </div>
      </template>
    </van-tree-select>
    <van-dialog v-model:show="show" :title="detail.title">
      <div class="model-wrapper">
        <div class="picture">
          <van-image width="64" height="64" :src="detail.pic"/>
        </div>
        <div class="des">{{detail.des}}</div>
      </div>
    </van-dialog>
  </div>

</template>

<script>
import {reactive, toRefs} from 'vue'
import {useRoute} from 'vue-router'
//引入图片
import png01 from '../assets/images/info/0-1.png'
import png02 from '../assets/images/info/0-2.png'
import png03 from '../assets/images/info/0-3.png'
import png04 from '../assets/images/info/0-4.png'
import png05 from '../assets/images/info/0-5.png'
import png06 from '../assets/images/info/0-6.png'
import png07 from '../assets/images/info/0-7.png'
import png08 from '../assets/images/info/0-8.png'
import png09 from '../assets/images/info/0-9.png'
import png10 from '../assets/images/info/0-10.png'
import png11 from '../assets/images/info/1-1.png'
import png12 from '../assets/images/info/1-2.png'
import png13 from '../assets/images/info/1-3.png'
import png14 from '../assets/images/info/1-4.png'
import png15 from '../assets/images/info/1-5.png'
import png16 from '../assets/images/info/1-6.png'
import png21 from '../assets/images/info/2-1.png'
import png22 from '../assets/images/info/2-2.png'
import png23 from '../assets/images/info/2-3.png'
import png24 from '../assets/images/info/2-4.png'
import png25 from '../assets/images/info/2-5.png'
import png31 from '../assets/images/info/3-1.png'
import png32 from '../assets/images/info/3-2.png'
import png33 from '../assets/images/info/3-3.png'
import png34 from '../assets/images/info/3-4.png'
import png35 from '../assets/images/info/3-5.png'
import png36 from '../assets/images/info/3-6.png'
import png41 from '../assets/images/info/4-1.png'
import png42 from '../assets/images/info/4-2.png'
import png43 from '../assets/images/info/4-3.png'
import png44 from '../assets/images/info/4-4.png'

export default {
  name: "Info",
  setup() {
    const route = useRoute();

    const state = reactive({
      clientHeight: (document.documentElement.clientHeight||document.body.clientWidth)-96,
      activeIndex: route.query.id || 0,
      items: [
        {text: "热门服务"},
        {text: "保洁清扫"},
        {text: "管道疏通"},
        {text: "家电维修"},
        {text: "家具清理"}
      ],
      list: [
        [
          {id: 1, title: '钟点工保洁', des: '家庭日常保洁，卫生保洁，室内擦玻璃等。', pic: png01},
          {id: 2, title: '居民搬家', des: '同城搬家，各种家居搬运等。', pic: png02},
          {id: 3, title: '空调清修', des: '空调修理，空调清理，不启动，不制热，不制冷等。', pic: png03},
          {id: 4, title: '马桶疏通', des: '蹲便器，坐便器等因各类原因造成堵塞，进行疏通等。', pic: png04},
          {id: 5, title: '家庭保洁', des: '家居打扫，卧室打扫，室内玻璃清洁，家具清洁等。', pic: png05},
          {id: 6, title: '门窗维修安装', des: '各种玻璃门，地弹门，铝合金门，卫生间门等。', pic: png06},
          {id: 7, title: '水龙头装修', des: '水龙头更换，维修安装，PPR管，PVC管等。', pic: png07},
          {id: 8, title: '卫浴洁具维修', des: '安装各种地漏、马桶、面盆、沐浴设备等。', pic: png08},
          {id: 9, title: '墙壁打孔', des: '墙壁进行打孔处理等。', pic: png09},
          {id: 10, title: '地板维修', des: '地板维修，养护处理等。', pic: png10},
        ],
        [
          {id: 1, title: '钟点工保洁', des: '家庭日常保洁，卫生保洁，室内擦玻璃等。', pic: png01},
          {id: 2, title: '家电清洗', des: '冰箱清洗，空调清洗，油烟机清理，热水器清理等。', pic: png11},
          {id: 3, title: '家居清洗', des: '沙发清洗，地毯清洗，窗帘清洗，壁纸清理等。', pic: png12},
          {id: 4, title: '擦玻璃', des: '清除玻璃污垢，玻璃边框，槽道灰尘，窗台灰尘等。', pic: png13},
          {id: 5, title: '热水器清洗', des: '清洗内胆，进水管，出水管，排水管等。', pic: png14},
          {id: 6, title: '太阳能清洗', des: '太阳能热水器清洗等。', pic: png15},
          {id: 7, title: '窗帘清洗', des: '窗帘清洗，拆卸，安装等。', pic: png16},
        ],
        [
          {id: 1, title: '马桶疏通', des: '蹲便器，坐便器等因各类原因造成堵塞，进行疏通等。', pic: png04},
          {id: 2, title: '疏通管道', des: '洗手池管道，厨房管道，地漏等各种下水管道等。', pic: png21},
          {id: 3, title: '管道清洗', des: '清洗管道污渍，疏通管道等。', pic: png22},
          {id: 4, title: '马桶维修', des: '马桶漏水，坐便器漏水，洁具漏水等。', pic: png23},
          {id: 5, title: '马桶安装', des: '马桶安装：承接各种型号马桶的安装等。', pic: png24},
          {id: 6, title: '管道改造', des: '新管道安装，旧管道改造，管道修复等。', pic: png25},
        ],
        [
          {id: 1, title: '空调清修', des: '空调修理，空调清理，不启动，不制热，不制冷等。', pic: png03},
          {id: 2, title: '热水器维修', des: '专业修理安装各种品牌热水器不通电或不制热等。', pic: png31},
          {id: 3, title: '冰箱维修', des: '专业修理安装各种品牌的冰箱不制冷、制冷差、不通电等。', pic: png32},
          {id: 4, title: '洗衣机维修', des: '专业修理安装各种品牌的洗衣机出现的问题等。', pic: png33},
          {id: 5, title: '电视维修', des: '专业修理安装各种品牌的电视机开不了机、黑屏等问题等。', pic: png34},
          {id: 6, title: '油烟机装修', des: '专业修理安装各种品牌的油烟机等。', pic: png35},
          {id: 7, title: '燃气灶维修', des: '检修故障，更换配件等。', pic: png36},
        ],
        [
          {id: 1, title: '门窗维修安装', des: '各种玻璃门，地弹门，铝合金门，卫生间门等。', pic: png06},
          {id: 2, title: '水龙头装修', des: '水龙头更换，维修安装，PPR管，PVC管等。', pic: png41},
          {id: 3, title: '卫浴洁具维修', des: '安装各种地漏、马桶、面盆、沐浴设备等。', pic: png42},
          {id: 4, title: '墙壁打孔', des: '墙壁打孔等相关处理。', pic: png43},
          {id: 5, title: '地板维修', des: '地板维修，地板养护等。', pic: png44},
        ]

      ],
      detail: {},
      show: false,
    })

    const showDetail = item => {
      state.detail = item;
      state.show = true;
    }

    return {
      ...toRefs(state),
      showDetail,
    }
  }
}
</script>

<style lang="less">
.van-tree-select__content{
  flex: 3 1 0 !important;
}
.info{
  .content{
    display: flex;
    align-items: center;
    padding: 10px 5px;
    border: 1px solid #eae6e6d1;
    margin: 10px;
    border-radius: 5px;
    .text{
      padding: 5px;
      margin-left: 10px;
      overflow: hidden;
      .title{
        font-size: 16px;
        font-weight: 700;
      }
      .des{
        font-size: 12px;
        margin-top: 10px;
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        letter-spacing: 1px;
      }
    }
  }
}
.model-wrapper{
  padding: 10px;
  display: flex;
  height: 100px;
  //align-items: center;
  .picture{
    display: flex;
    align-items: center;
  }
  .des{
    display: flex;
    align-items: center;
    color: #666;
    padding: 10px;
    line-height: 2;
  }
}
.van-dialog__header{
  font-size: 18px !important;
  font-weight: 700 !important;
}
.content {
  padding: 16px 16px 160px;
}
</style>